<template>
  <div class="welcome-guide">
    <div class="guide-container">
      <div class="welcome-content">
        <div class="icon-section">
          <el-icon size="80" color="#409eff">
            <DocumentAdd />
          </el-icon>
        </div>
        
        <div class="text-section">
          <h2>欢迎使用 DescriptorX</h2>
          <p class="description">
            DescriptorX 是一个专为 Kubernetes CRD 设计的 X-Descriptors 编辑器。
            <br />
            通过智能分析 CRD 定义和 Sample 数据，自动生成优化的字段描述符。
          </p>
        </div>

                <div class="action-section">
          <el-button 
            type="success" 
            size="large" 
            @click="openFileImport"
            class="import-btn"
          >
            <el-icon><Upload /></el-icon>
            导入 CRD 文件
          </el-button>
        </div>

        <div class="features-section">
          <h3>主要功能</h3>
          <div class="features-grid">
            <div class="feature-item">
              <el-icon><Document /></el-icon>
              <div class="feature-text">
                <strong>CRD 解析</strong>
                <span>智能解析 Kubernetes CRD 结构</span>
              </div>
            </div>
            
            <div class="feature-item">
              <el-icon><Edit /></el-icon>
              <div class="feature-text">
                <strong>Sample 分析</strong>
                <span>基于示例数据自动生成描述符</span>
              </div>
            </div>
            
            <div class="feature-item">
              <el-icon><Setting /></el-icon>
              <div class="feature-text">
                <strong>字段控制器</strong>
                <span>可视化编辑字段属性和描述符</span>
              </div>
            </div>
            
            <div class="feature-item">
              <el-icon><Download /></el-icon>
              <div class="feature-text">
                <strong>导出配置</strong>
                <span>生成标准的 X-Descriptors 配置</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 隐藏的文件输入 -->
    <input
      ref="fileInputRef"
      type="file"
      accept=".yaml,.yml"
      style="display: none"
      @change="handleFileUpload"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DocumentAdd, Upload, Document, Edit, Setting, Download } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const emit = defineEmits<{
  importCrd: [text: string, fileName: string]
}>()

const fileInputRef = ref<HTMLInputElement>()

function openFileImport() {
  fileInputRef.value?.click()
}

async function handleFileUpload(event: Event) {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]
  
  if (!file) return

  try {
    const text = await file.text()
    emit('importCrd', text, file.name)
  } catch (error) {
    ElMessage.error('文件读取失败')
  }
  
  // 清空文件输入
  target.value = ''
}


</script>

<style lang="scss" scoped>
.welcome-guide {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;

  .guide-container {
    max-width: 800px;
    width: 100%;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    padding: 60px 40px;
    text-align: center;

    .welcome-content {
      .icon-section {
        margin-bottom: 30px;
      }

      .text-section {
        margin-bottom: 40px;

        h2 {
          font-size: 32px;
          font-weight: 600;
          color: #2c3e50;
          margin-bottom: 16px;
        }

        .description {
          font-size: 16px;
          color: #64748b;
          line-height: 1.6;
          max-width: 600px;
          margin: 0 auto;
        }
      }

      .action-section {
        margin-bottom: 50px;

        .import-btn {
          width: 240px;
          height: 54px;
          font-size: 18px;
          font-weight: 600;
          border-radius: 12px;
          box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
          transition: all 0.3s ease;
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(103, 194, 58, 0.4);
          }
        }
      }

      .features-section {
        text-align: left;

        h3 {
          font-size: 20px;
          font-weight: 600;
          color: #2c3e50;
          margin-bottom: 24px;
          text-align: center;
        }

        .features-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 20px;

          .feature-item {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            padding: 20px;
            background: #f8fafc;
            border-radius: 12px;
            border: 1px solid #e2e8f0;

            .el-icon {
              color: #409eff;
              font-size: 24px;
              margin-top: 2px;
            }

            .feature-text {
              flex: 1;

              strong {
                display: block;
                font-size: 16px;
                font-weight: 600;
                color: #2c3e50;
                margin-bottom: 4px;
              }

              span {
                font-size: 14px;
                color: #64748b;
                line-height: 1.4;
              }
            }
          }
        }
      }
    }
  }
}
</style> 